<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-canvas上下文对象</title>
</head>
<body>
    <!-- 
        id:标识元素的唯一性
        width:画布的宽度
        height:画布的高度
     -->

     <canvas id="c1" width="600" height="400">
        如果浏览器不支持canvas，那么就会把这个标签当作普通标签，就会显示canvas里面的文字
     </canvas>

     <script>
        // 画一个矩形
        // 1.找到画布
        var c1 = document.querySelector("#c1")

        // 判断是否有getContext
        if(!c1.getContext){
            console.log("当前浏览器不支持canvas，下载最新的浏览器吧")
        }

        // 2.获取画笔，画笔就是上下文对象
        var ctx = c1.getContext("2d")
        // 3.路径绘制矩形  strokeRect(坐标x, 坐标y, 宽度, 高度)
        ctx.strokeRect(100, 100, 200, 200)
     </script>
</body>
</html>